<template>
    <ul class="manage_item">
        <li></li>
        <li class='manage_item_default manage_item_change'><input type="text" name="" placeholder='请输入名字' v-model='addData.name' class='manage_item_s'></li>
        <li class='manage_item_default manage_item_change'><input type="text" name="" maxlength="11" minlength="11" placeholder='输入11位手机号码' v-model='addData.phone' class='manage_item_s'></li>
        <li class='manage_item_default manage_item_change manage_item_icon' @click="show=true">
            <div class='manage_item_s'>{{addData.permissions}}</div>
            <manageMenu class='manage_menu' v-on:menuName='menuName' v-if='show' :listN='opda'></manageMenu>
        </li>
        <li class='manage_item_delete' @click='addData(index)' v-show="1==0">&#xe84b;</li>
    </ul>
</template>
<script>
    import manageMenu from './../../../component/dropDownMenu.vue'


    export default{
        data(){
            return{
                show:false,
                addData:{
                    id:999999,
                    name:'' ,
                    phone:'',
                    permissions:'默认用户',
                    permissionsNumber:2,
                    show:false,
                    fault:[false,false],
                    nameList:this.opda.name
                }
            }
        },
        props:['opda'],
        components:{
            manageMenu:manageMenu
        },
        mounted:function () {
        },
        methods:{
            menuName:function (val) {
                this.addData.permissions=val.val;
                this.addData.permissionsNumber=val.id;
                this.show=false;
            }
        },
        updated:function () {
            this.$emit('addOne',this.addData);
        }
    }
</script>
<style scoped>
    .manage_item_placeholder{
        width:150px;
        height:150px;
    }
    .manage_item_waring{
        color:#d65239;
        line-height:100%;
        padding:20px 0px 20px 0px;
    }
    .manage_item_waringIcon{
        font-family: 'icon';
        font-size:12px;
    }
    .manage_item_change{
        background-color:#1b375a;
    }
    .manage_item_change:hover{
        cursor:pointer;
    }
    .manage_item{
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        font-size: 12px;
    }
    .manage_item>li{
        height: 22px;
        line-height:22px;
        color:white;
    }
    .manage_item>li:nth-child(1){
        width:150px;
        text-align: center;
    }
    .manage_item_default{
        margin:3px 1.5px 3px 1.5px;
        flex: 1;
        text-align: center;
        position: relative;
    }
    .manage_item_icon:after{
        content: '\e663';
        font-family: 'icon';
        font-size:12px;
        color:#7dc4f0;
        position: absolute;
        top:0px;
        right:5px;
        transform: rotate(-90deg) scale(0.8);
    }
    .manage_item>li:last-of-type{
        width:20px;
        flex: none !important;
        font-family:'icon';
        font-size:12px;
        color:#d65239;
        text-align: center;
        line-height: 25px;
        cursor: pointer
    }
    .manage_item>li:last-of-type:hover{
        color:#7dc4f0;
    }
    .manage_item_s{
        text-align: center;
        background-color:transparent;
        border:none;
        outline: none;
        color:white;
        width:100%;
    }
</style>